<template>
  <Teleport to="body">
    <section
      class="h-screen w-screen overflow-hidden fixed z-[99999] inset-0 bg-[rgba(109,116,126,0.4)] flex justify-center pt-[100px]"
      @click.stop.prevent
    >
      <div
        class="grid grid-rows-[56px_1fr_40px] rounded-[4px] overflow-hidden bg-[#fff] dialog backdrop-blur-[4px] pb-[10px]"
      >
        <div
          class="flex items-center w-full px-[16px] text-[18px] drop-shadow-blur-[2px] borader"
        >
          <span class="select-none font-bold">{{ title }}</span>
          <svg-icon
            name="close"
            class="ml-auto cursor-pointer"
            @click="cancel"
          ></svg-icon>
        </div>
        <section
          class="overflow-auto pb-[10px]"
          :class="contentClass"
          v-if="content.constructor.name === 'String'"
        >
          {{ content }}
          <slot></slot>
        </section>
        <component :is="content" v-else></component>
        <section class="flex justify-end gap-x-[16px] pr-[24px]">
          <Button type="cancel" @click="cancel">{{ cancelText }}</Button>
          <Button type="primary" @click="submit">{{ submitText }}</Button>
        </section>
      </div>
    </section>
  </Teleport>
</template>

<script setup>
const {
  title,
  cancel,
  isShowBtn,
  submitText,
  cancelText,
  submit,
  loading,
  contentClass,
} = defineProps({
  title: {
    type: String,
    default: "生成报告",
  },
  cancel: {
    type: Function,
    default: () => {},
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
  submit: {
    type: Function,
    default: () => {},
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  submitText: {
    type: String,
    default: "导出",
  },
  loading: {
    type: [Boolean, Number, Object],
    default: false,
  },
  content: {
    type: [String, Object],
    default: "",
  },

  contentClass: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.head {
  background: var(--alert-header-bg-color);
}

:deep(.el-select-dropdown__item) {
  font-size: 16px;
  font-family: MicrosoftYaHei;
}

.dialog {
  background-size: 100% 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
}
:deep(.toolbar) {
  display: none;
}
:deep(#toolbarSidebar) {
  display: none;
}
:deep(.pdf-app #viewerContainer) {
  top: 5px;
  padding-bottom: 30px;
}
:deep(.pdf-app #sidebarContainer),
:deep(.pdf-app #sidebarContent) {
  top: 0;
}
:deep(.pdf-app .pdfViewer .page) {
  border-image: none;
}
:deep(.pdf-app .selected > .thumbnailSelectionRing),
:deep(.pdf-app .thumbnailSelectionRing:hover) {
  height: 100% !important;
  border-radius: 4px;
  padding: 0;
  border: 2px solid rgb(26, 102, 255);
}
:deep(.pdf-app .thumbnailImage) {
  box-shadow: none;
}
:deep(.pdf-app #sidebarContent) {
  background: #fff !important;
  box-shadow: none !important;
}
:deep(.pdf-app #thumbnailView) {
  padding-top: 20px;
}
.borader {
  border-bottom: 1px solid rgb(221, 227, 239);
  border-radius: 4px 4px 0px 0px;
  background: rgb(255, 255, 255);
}
:deep(.pdf-app a:focus > .thumbnail > .thumbnailSelectionRing) {
  background-color: transparent !important;
}
</style>
<style lang='scss'>
</style>